<template>
  <div>
    <el-row :gutter="20">
      <el-col
        :span="6"
        :xs="24"
      >
        <el-card class="card-left">
          <h2 style="text-align: center; color: rgb(84, 83, 83)">{{$t('statistics_return_returndetails_384')}}</h2>
          <span>——</span><br>
          <animate-number
            :key="monthReturnTotal"
            from="1"
            :to="monthReturnTotal"
            class="returnData"
          />
        </el-card>
        <el-card class="card-left">
          <h2 style="text-align: center; color: rgb(84, 83, 83)">{{$t('statistics_return_returndetails_385')}}</h2>
          <span>——</span><br>
          <animate-number
            :key="monthReturnQuantity"
            from="1"
            :to="monthReturnQuantity"
            class="returnData"
          />
        </el-card>
      </el-col>
      <el-col
        :span="18"
        :xs="24"
      >
        <el-card style="height: 520px; margin-right: -20px; margin-top: 20px">
          <div
            slot="header"
            class="clearfix"
          >
            <span class="title">{{$t('statistics_return_returndetails_386', [ returnReasonFormattedyear ])}}</span>
            <el-date-picker
              v-model="returnReasonDate"
              type="year"
              :picker-options="{disabledDate}"
              @change="handleDateChange(returnReasonDate, 'returnReason')"
            />
          </div>
          <div
            ref="returnReasonChart"
            class="details"
          />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col
        :span="12"
        :xs="24"
      >
        <el-card style="height: 580px; margin-left: 20px;">
          <div
            slot="header"
            class="clearfix"
          >
            <span class="title">{{$t('statistics_return_returndetails_387', [ monthReturnFormattedyear ])}}</span>
            <el-date-picker
              v-model="monthReturnDate"
              type="year"
              :picker-options="{disabledDate}"
              @change="handleDateChange(monthReturnDate, 'monthReturn')"
            />
          </div>
          <div
            ref="monthReturnChart"
            class="details"
          />
        </el-card>
      </el-col>
      <el-col
        :span="12"
        :xs="24"
      >
        <el-card style="height: 580px;">
          <div
            slot="header"
            class="clearfix"
          >
            <span class="title">{{$t('statistics_return_returndetails_388', [ returnProductRateFormattedyear ])}}</span>
          </div>
          <div
            ref="returnRateChart"
            class="details"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getRefundData,
  getReturnProductData,
  getReturnReasonData,
  getReturnCount,
  getAvaliableDate
} from "@/api/dashboard";
export default {
  name: "ReturnDetails",
  data() {
    return {
            //可用日期
      availableYears:[],
      // 当月退货单量
      monthReturnTotal: 0,
      // 退款总额
      monthReturnQuantity: 0,
      // 退货原因
      returnReasonData: [],
      // 仪表盘数据
      returnReasonOption: null,
      returnReasonChart: null,
      returnRateChart: null,
      returnRateOption: null,
      monthReturnChart:null,
      monthReturnOption:null,
      // 每月退货订单量
      monthlyrefundCount: [],
      // 产品退货率最高前5
      refundProducts: [],
      refundProductsRate: [],
      //月退货单量日期选择
      monthReturnDate: new Date(),
      monthReturnFormattedyear: null,
      //产品退货率日期选择
      returnProductRateDate: new Date(),
      returnProductRateFormattedyear: null,
      //退货原因日期选择
      returnReasonDate: new Date(),
      returnReasonFormattedyear: null,
      // 日期列表
      monthList: [
        this.$t('statistics_return_returndetails_389'),
        this.$t('statistics_return_returndetails_390'),
        this.$t('statistics_return_returndetails_391'),
        this.$t('statistics_return_returndetails_392'),
        this.$t('statistics_return_returndetails_393'),
        this.$t('statistics_return_returndetails_394'),
        this.$t('statistics_return_returndetails_395'),
        this.$t('statistics_return_returndetails_396'),
        this.$t('statistics_return_returndetails_397'),
        this.$t('statistics_return_returndetails_398'),
        this.$t('statistics_return_returndetails_399'),
        this.$t('statistics_return_returndetails_400'),
      ],
    };
  },
  created() {
    this.initDateFormats(this.monthReturnDate, "monthReturn");
    this.initDateFormats(this.returnProductRateDate, "returnProductRate");
    this.initDateFormats(this.returnReasonDate, "returnReason");
        // 获取可用日期
    getAvaliableDate().then((response) => {
      this.availableYears=response.data
    });
    // 获取退货基础数据
    getRefundData().then((response) => {
      this.monthReturnTotal = response.data.refundTotal;
      this.monthReturnQuantity = response.data.refundCount;
    });
    // 获取产品退货率最高前5数据
    getReturnProductData().then((response) => {
      this.refundProducts = response.data.name;
      this.refundProductsRate = response.data.percentage;
      this.initEcharts();
    });
    // 获取退货原因数据
    getReturnReasonData(this.returnReasonFormattedyear).then((response) => {
      this.returnReasonData = response.data;
      this.initEcharts();
    });
    // 获取退货单量数据
    getReturnCount(this.monthReturnFormattedyear).then((response) => {
      this.monthlyrefundCount = response.data.data;
      this.initEcharts();
    });
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
        disabledDate(year) {
      // 如果日期不在可用日期列表中，则返回 true 以禁用该日期
      return !this.availableYears.includes(year.getFullYear());
    },
    initEcharts() {
      // 退货原因
      this.returnReasonChart = this.$echarts.init(this.$refs.returnReasonChart);
      this.returnReasonChart.resize({
        width: 1000,
      });
      this.returnReasonOption = {
        color:["#a2cdd4","#c0daaa","#5aa377","#e0e7b5","#acccb9","#a2cdd4","#5aa377","#c0daaa","#e0e7b5"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "0%",
          left: "15%",
        },
        series: [
          {
            name: this.$t('statistics_return_returndetails_401'),
            top: "14%",
            type: "pie",
            radius: ["50%", "90%"],
            center: ["40%", "50%"],
            startAngle: 180,
            endAngle: 360,
            data: this.returnReasonData,
          },
        ],
      };
      this.returnReasonOption &&
        this.returnReasonChart.setOption(this.returnReasonOption);

      // 退货单量
      this.monthReturnChart = this.$echarts.init(this.$refs.monthReturnChart);
      this.monthReturnChart.resize({
        height:500,
        width:500
      })
      this.monthReturnOption = {
        color:["#acccb9","#a2cdd4","#5aa377","#c0daaa","#e0e7b5","#acccb9","#a2cdd4","#5aa377","#c0daaa","#e0e7b5"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "0%",
          right: "5%",
          top: "2%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: this.monthList.reverse(),
        },
        series: [
          {
            type: "bar",
            data: this.monthlyrefundCount,
          },
        ],
      };
      this.monthReturnOption && this.monthReturnChart.setOption(this.monthReturnOption);

      // 产品退货率
      this.returnRateChart = this.$echarts.init(this.$refs.returnRateChart);
      this.returnRateChart.resize({
        width: 550,
        height: 520,
      });
      this.returnRateOption = {
        color:["#acccb9","#a2cdd4","#5aa377","#c0daaa","#e0e7b5","#acccb9","#a2cdd4","#5aa377","#c0daaa","#e0e7b5"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: this.refundProducts,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.refundProductsRate,
            type: "bar",
          },
        ],
      };
      this.returnRateOption &&
        this.returnRateChart.setOption(this.returnRateOption);
    },
    handleDateChange(newValue, type) {
      if (newValue) {
        const year = newValue.getFullYear();
        // 退货单量
        if (type === "monthReturn") {
          this.monthReturnFormattedyear = year;
          getReturnCount(this.monthReturnFormattedyear).then((response) => {
            this.monthlyrefundCount = response.data.data;
            this.monthReturnChart.setOption({
              xAxis: {
                type: "value",
                boundaryGap: [0, 0.01],
              },
              yAxis: {
                type: "category",
                data: this.monthList.reverse(),
              },
              series: [
                {
                  type: "bar",
                  data: this.monthlyrefundCount,
                },
              ]
            },true)
          });
        }
        // 退货原因
        if (type === "returnReason") {
          this.returnReasonFormattedyear = year;
          getReturnReasonData(this.returnProductRateFormattedyear).then((response) => {
              this.returnReasonData=response.data
              this.returnReasonChart.setOption({
                series: [
                  {
                    name: this.$t('statistics_return_returndetails_401'),
                    top: "14%",
                    type: "pie",
                    radius: ["50%", "90%"],
                    center: ["40%", "50%"],
                    startAngle: 180,
                    endAngle: 360,
                    data: this.returnReasonData,
                  },
                ],
              },true)
            });
        }
        // 产品退货率最高前5
        if (type === "returnProductRate") {
          this.returnProductRateFormattedyear = year;
          getReturnProductData(this.returnProductRateFormattedyear).then((response) => {
              this.refundProducts = response.data.name;
              this.refundProductsRate = response.data.percentage;
              this.returnRateChart.resize({
                width: 650,
                height: 300,
              });
              this.returnRateChart.setOption(
                {
                  grid: {
                    left: "1%",
                    right: "0%",
                    bottom: "3%",
                    containLabel: true,
                  },
                  xAxis: {
                    data: this.refundProducts,
                  },
                  yAxis: {
                    type: "value",
                  },
                  series: [
                    {
                      data: this.refundProductsRate,
                      type: "bar",
                    },
                  ],
                },
                true
              );
            }
          );
        }
      }
    },
    initDateFormats(date, type) {
      if (date) {
        const year = date.getFullYear();
        if (type === "monthReturn") {
          this.monthReturnFormattedyear = year;
        }
        if (type === "returnProductRate") {
          this.returnProductRateFormattedyear = year;
        }
        if (type === "returnReason") {
          this.returnReasonFormattedyear = year;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: -10px;
  font-size: 25px;
  font-weight: bold;
  color: rgb(86, 83, 83);
}
.card-left {
  height: 250px;
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.returnData {
  font-size: 80px;
  font-weight: bold;
  color: rgb(255, 152, 152);
}
.details {
  width: 900px;
  height: 600px;
  margin: 0 auto;
}
</style>
